
import {defineComponent,PropType,computed,reactive} from "vue"
import "./index.less"
export interface meau{ 
  type:number,
  name:string
}
export default defineComponent({
    emits:{
      "click":null
    },
    inheritAttrs: false,
    props:{
      barData:{
        type:Array as PropType<meau[]>,
        required:true
      },
    },
    setup(props,ctx){
      const state=reactive({
        selectName:"样式"
      })
      const table =(value: string) => {
        return value === state.selectName ? { background: "#22242b",borderTop: "2px solid #2491f7"} : { background: "#2d2f38",borderTop:""};
      }
      return ()=>(<div class="tabs">
        {props.barData.map(item=>{
          return <div class="center tab-item" onClick={()=>{state.selectName=item.name,ctx.emit("click",item)}} style={table(item.name)}>{item.name}</div>
        })}
    </div>)
    }
})
